<template>
  <el-card class="box-card">
    <!-- 卡片标题 -->
    <div slot="header" class="clearfix">
      <span>用户列表</span>
      <el-button type="primary" style="float: right;" @click="openAddUserDialog">添加用户</el-button>
    </div>

    <!-- 添加用户对话框 -->
    <el-dialog title="添加用户" :visible.sync="addUserDialogVisible" width="30%">
      <el-form :model="newUser" :rules="rules" ref="addUserForm" label-width="100px">
        <el-form-item label="账户" prop="account">
          <el-input v-model="newUser.account" placeholder="请输入账户" />
        </el-form-item>
        <el-form-item label="昵称" prop="username">
          <el-input v-model="newUser.username" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="选择角色" prop="role">
          <el-select v-model="newUser.role" placeholder="请选择">
            <el-option
                v-for="item in roleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddUser">提交</el-button>
      </span>
    </el-dialog>

    <!-- 卡片内容区域1: 放一组横排的form表单, 给用户输入查询条件 -->
    <el-form class="el-form--inline" label-position="left">
      <el-form-item label="用户昵称">
        <el-input placeholder="(支持模糊查询)" v-model="username" />
      </el-form-item>
      <el-form-item label="选择状态" prop="status">
        <el-select v-model="statusValue" placeholder="请选择">
          <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="选择角色" prop="role">
        <el-select v-model="roleValue" placeholder="请选择">
          <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 卡片内容区域2: 这里放表格, 展示本次数据 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="username" label="用户昵称" width="180" />
      <el-table-column prop="account" label="账户名" width="180" />
      <el-table-column prop="role" label="角色" width="180" />
      <el-table-column prop="statusValue" label="状态" width="180">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status == 0" type="success">启用中</el-tag>
          <el-tag v-if="scope.row.status == 1" type="danger">已禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column>
        <template v-slot="scope">
          <el-button
              type="warning"
              plain
              size="mini"
              v-if="scope.row.status == 0"
              @click="handleDisable(scope.row.id, 1)"
          >
            禁用
          </el-button>
          <el-button
              type="primary"
              plain
              size="mini"
              v-if="scope.row.status == 1"
              @click="handleDisable(scope.row.id, 0)"
          >
            启用
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 卡片底部: 这里分页器 -->
    <el-row class="card-footer" style="margin-top: 10px">
      <el-col>
        <el-pagination
            layout="sizes,prev,pager,next,jumper,total"
            :total="total"
            background
            :current-page="current"
            :page-size="size"
            :page-sizes="sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { defineComponent } from 'vue';
import { handleError, handleSuccess } from '@/util/request';

export default defineComponent({
  name: 'UserPage',
  data() {
    return {
      // 表格绑定的数据
      tableData: [],
      roleValue: '',
      statusValue: '',
      roleOptions: [
        { value: '供应商', label: '供应商' },
        { value: '采购商', label: '采购商' },
        { value: '审核员', label: '审核员' },
      ],
      statusOptions: [
        { label: '已禁用', value: 1 },
        { label: '已启用', value: 0 },
      ],
      total: 0,
      pages: 0,
      username: null,
      status: null,
      role: null,
      current: 1,
      size: 10,
      sizes: [5, 10, 20, 50, 100],
      dialogVisible: false,
      record: {},

      // 添加用户相关数据
      addUserDialogVisible: false,
      newUser: {
        account: '',
        username: '',
        role: '',
      },
      rules: {
        account: [{ required: true, message: '请输入账户名', trigger: 'blur' }],
        username: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        role: [{ required: true, message: '请选择角色', trigger: 'change' }],
      },
    };
  },
  methods: {
    // 获取分页数据
    getPageData() {
      let page = {
        current: this.current,
        size: this.size,
        username: this.username,
        status: this.statusValue,
        role: this.roleValue,
        account: this.account,
      };
      this.$http
          .get('/user/page', { params: page })
          .then((result) => {
            const page = handleSuccess(result);
            if (page) {
              this.tableData = page.records;
              this.total = page.total;
              this.pages = page.pages;
            }
          })
          .catch((error) => {
            handleError(error);
          });
    },
    handleSizeChange(size) {
      this.size = size;
      this.getPageData();
    },
    handleCurrentChange(current) {
      this.current = current;
      this.getPageData();
    },
    handleSearch() {
      this.current = 1;
      this.size = 10;
      this.getPageData();
    },
    handleReset() {
      this.roleValue = null;
      this.statusValue = null;
      this.username = null;
      this.getPageData();
    },
    handleDisable(id, status) {
      let message = status == 0 ? '确定要启用该用户吗' : '确定要禁用该用户吗';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            this.$http
                .post('/user/disable', { id, status })
                .then((result) => {
                  if (handleSuccess(result)) {
                    this.getPageData();
                  }
                })
                .catch((error) => {
                  handleError(error);
                });
          })
          .catch(() => {});
    },

    // 打开添加用户对话框
    openAddUserDialog() {
      this.addUserDialogVisible = true;
    },

    // 提交添加用户表单
    handleAddUser() {
      this.$refs.addUserForm.validate((valid) => {
        if (valid) {
          this.$http
              .post('/user/save', {
                account: this.newUser.account,
                username: this.newUser.username,
                role: this.newUser.role,
              })
              .then((result) => {
                if (handleSuccess(result)) {
                  this.addUserDialogVisible = false;
                  this.getPageData(); // 刷新用户列表
                  this.newUser = { account: '', username: '', role: '' }; // 清空表单
                }
              })
              .catch((error) => {
                handleError(error);
              });
        }
      });
    },
  },
  mounted() {
    this.getPageData();
  },
});
</script>

<style scoped>
.box-card {
  padding: 20px;
}

.el-form--inline .el-form-item {
  margin-right: 10px;
}

.card-footer {
  margin-top: 20px;
  text-align: right;
}
</style>